<template>
  <div class="container"  style="overflow: auto">
    <div class="search-container" v-loading="loading">
      <el-form v-model="searchPage" inline="true" >
        <el-form-item  v-for="(item, index) in searchPage.items.filter(item => { return item.disable ==true})" :key="index" :label="item.cnname">
          <el-input v-if="item.itemType !== 'DATE'" v-model="item.value"></el-input>
          <el-col :span="24" v-else>
            <el-form-item>
              <el-date-picker
                v-model="item.value"
                type="date"
                label="Pick a date"
                placeholder="Pick a date"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="pic-container">
      <nav v-loading="loading" v-for="(item, index) in cardDatas" :key="index">
        <el-row :gutter="20" v-if="index%2==0">
          <el-col :span="11"><div class="grid-content bg-purple" />
            <el-card  class="box-card">
              <template #header>
                <div class="card-header">
                  <span>{{cardDatas[index].lostName}}</span>
                </div>
              </template>
              <el-image
                :src="singleUrl(cardDatas[index].fileRandomId)"
                :preview-src-list="arrayUrl(cardDatas[index].fileRandomId)"
                fit="fill"
              />
              <div class="text item">{{cardDatas[index].fileDesc}}</div>
              <el-divider content-position="right"><el-button type="primary" @click="userApply(cardDatas[index].id)">申请</el-button></el-divider>
            </el-card>
          </el-col>
          <el-col :span="11" v-if="(index+1) < cardDatas.length"><div class="grid-content bg-purple" />
            <el-card  class="box-card">
              <template #header>
                <div class="card-header">
                  <span>{{cardDatas[index+1].lostName}}</span>
                </div>
              </template>
              <el-image
                :src="singleUrl(cardDatas[index+1].fileRandomId)"
                :preview-src-list="arrayUrl(cardDatas[index+1].fileRandomId)"
                fit="fill"
              />
              <div class="text item">{{cardDatas[index+1].fileDesc}}</div>
              <el-divider content-position="right"><el-button type="primary" @click="userApply(cardDatas[index+1].id)">申请</el-button></el-divider>
            </el-card>
          </el-col>
        </el-row>
      </nav>
    </div>
    <el-pagination
      v-model:currentPage="searchPage.current"
      v-model:page-size="searchPage.pageSize"
      :page-sizes="[20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageCount"
      hide-on-single-page=true
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { ref, onActivated } from 'vue'
import router from '@/router'
import { list } from '@/api/lost'
import { singleUrl, arrayUrl } from '@/utils/file'
import { ElMessage } from 'element-plus'

const cardDatas = ref([])

const pageCount = ref(0)

const loading = ref(false)

const searchPage = ref({
  items: [
    {
      temType: 'STRING',
      name: 'statusDesc',
      cnname: '状态',
      sign: '==',
      value: 'PUBLIC',
      disable: false
    },
    {
      temType: 'STRING',
      name: 'lostName',
      cnname: '名称',
      sign: 'like',
      value: '',
      disable: true
    }
  ],
  pageSize: 20,
  current: 1,
  sortBy: ['lostDateTime'],
  sort: 'DESC'
})

const searchFunction = async () => {
  // console.log(flag)
  loading.value = true
  list(searchPage.value).then(res => {
    console.log(res)
    cardDatas.value = res.content
    pageCount.value = res.totalElements
    ElMessage.success('查询成功')
    loading.value = false
  }).catch(err => {
    loading.value = false
    console.log(err)
  })
}

onActivated(searchFunction())

const userApply = id => {
  router.push(`/lost/apply/${id}`)
}

const onSubmit = () => {
  searchFunction()
}

const handleSizeChange = pageSize => {
  searchPage.value.pageSize = pageSize
  // 执行查询操作
  searchFunction()
}

const handleCurrentChange = current => {
  searchPage.value.current = current
  // 执行查询操作
  searchFunction()
}

</script>

<style scope>
.container {
  margin-top: 20px;
}
.search-container {
  width: 100%;
  height: 50px;
  margin-left: 20px;
}
.pic-container {
  width: 100%;
  align-items: center;
  padding-left: 20px;
}

.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
